var map;
var center_point = new GLatLng(39.92, 116.47);
var employees;
var markers = [];
var currentEmployeeIcon = new GIcon(null, "http://www.google.com/intl/en_de/mapfiles/ms/icons/red-dot.png");
currentEmployeeIcon.iconAnchor = new GPoint(16, 32);
currentEmployeeIcon.infoWindowAnchor = new GPoint(15, 1);

var originalEmployeeIcon = new GIcon(null, "http://labs.google.com/ridefinder/images/mm_20_red.png");
originalEmployeeIcon.iconAnchor = new GPoint(6, 20);
originalEmployeeIcon.infoWindowAnchor = new GPoint(5, 1);

//    var twIcon = new GIcon(null, "http://maps.google.com/mapfiles/kml/pal2/icon13.png");
var twIcon = new GIcon(null, "http://labs.google.com/ridefinder/images/mm_20_blue.png");
twIcon.iconAnchor = new GPoint(16, 32);
twIcon.infoWindowAnchor = new GPoint(15, 1);

if (GBrowserIsCompatible()) {
    var mapElement = document.getElementById("map");
    map = new GMap2(mapElement);
    addMapControl();
    map.setCenter(center_point, 11);

    reloadMapInfo();
}
function addMapControl() {
    var topRight = new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10));
    var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10, 10));
    var mapTypeControl = new GMapTypeControl();
    map.addControl(mapTypeControl, topRight);
    map.addControl(new GLargeMapControl());
}
function reloadMapInfo() {
    map.clearOverlays();
    addTWInfo();
    var employeesElement = document.getElementById("employees");
    jQuery.getJSON("/link-me-in/dashboard/map", function(json) {
        employees = json.employees;
        for (var i = 0; i < employees.length; i++)
        {
            var employee = employees[i];
            if (employee.lat != 0) {
                var marker = createMarker(employee, originalEmployeeIcon);
            }
            employeesElement.add(new Option(employee.englishName + " " + employee.chineseName, employee.shrinkedEnglishName), null);
        }
    });
}

function addTWInfo() {
    var tw;
    tw = {lat: 39.94,lng:116.433, chineseName:"", englishName:"ThoughtWorks Beijing Office",cellphone:"010-64076695", address:" Room1105,11th Floor GuoHua Plaza, No.3 Dongzhimen South Street, Dongcheng District, Beijing, China 100007",shrinkedEnglishName:"thoughtworksbeijingoffice"};
    createMarker(tw, twIcon);
}
function createMarker(markableObj, icon) {
    var point = new GLatLng(markableObj.lat, markableObj.lng);

    var marker = new GMarker(point, {title: getMarkerDisplayName(markableObj), draggable:true, icon:icon});
    var html = getMarkerInfoFor(markableObj);
    GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
    });
    GEvent.addListener(marker, 'dragstart', function() {
        marker.closeInfoWindow();
    });
    marker.disableDragging();
    map.addOverlay(marker);
    markers.push(marker);
    return marker;
}

function getMarkerDisplayName(markableObj) {
    return  markableObj.englishName + " " + markableObj.chineseName;
}
function getMarkerInfoFor(markableObj) {
    return  "<b>" + getMarkerDisplayName(markableObj) + "</b> <br/>" + markableObj.address + "<br />" + markableObj.cellphone;
}

function employeeChanged() {
    var employeesElement = document.getElementById("employees");
    var selectedName = employeesElement.options[employeesElement.selectedIndex].value;
    document.getElementById("employeeName").value = selectedName;
    if (selectedName == "")
    {
        clearEmployeeMapInfoForm();
        return;
    }
    employeesElement.disabled = true;
    document.getElementById("saveEmployee").disabled = false;
    document.getElementById("cancelEmployee").disabled = false;
    var selectedEmployee;
    var selectedMarker;
    for (var i = 0; i < employees.length; i++) {
        if (employees[i].shrinkedEnglishName == selectedName) {
            selectedEmployee = employees[i];
            break;
        }
    }
    document.getElementById("employeeAddress").value = selectedEmployee.address;
    for (var i = 0; i < markers.length; i++) {
        if (markers[i].getLatLng().equals(new GLatLng(selectedEmployee.lat, selectedEmployee.lng)))
        {
            selectedMarker = markers[i];
            map.removeOverlay(markers[i]);
        }
    }
    if (!selectedMarker) {
        selectedEmployee.lat = center_point.lat();
        selectedEmployee.lng = center_point.lng();
    }
    selectedMarker = createMarker(selectedEmployee, currentEmployeeIcon);
    document.getElementById("employeeLat").value = selectedEmployee.lat.toString();
    document.getElementById("employeeLng").value = selectedEmployee.lng.toString();
    var html = getMarkerInfoFor(selectedEmployee);
    selectedMarker.openInfoWindowHtml(html);
    selectedMarker.enableDragging();
    GEvent.addListener(selectedMarker, 'dragend', function(cursorPoint) {
        document.getElementById("employeeLat").value = cursorPoint.lat().toString();
        document.getElementById("employeeLng").value = cursorPoint.lng().toString();
    });
}

function onCancel() {
    reloadMapInfo();
    clearEmployeeMapInfoForm();
}

function toggleEmployeeMapInfoForm() {
    var employeeMapInfoForm = document.getElementById('editemployeemapinfo')
    if (employeeMapInfoForm.style.display == 'none') {
        employeeMapInfoForm.style.display = 'block'
    } else {
        employeeMapInfoForm.style.display = 'none'
    }
}
function clearEmployeeMapInfoForm() {
    var employeesElement = document.getElementById("employees");
    employeesElement.selectedIndex = 0;
    employeesElement.disabled = false;
    document.getElementById("employeeAddress").value = "";
    document.getElementById("employeeLat").value = "";
    document.getElementById("employeeLng").value = "";
    document.getElementById("saveEmployee").disabled = true;
    document.getElementById("cancelEmployee").disabled = true;

}
